<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.15.13/theme-chalk/index.css">
    <script src="https://cdn.bootcss.com/vue/2.7.9/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/element-ui/2.15.13/index.js"></script>
</head>
<body style="overflow: hidden;margin: 0px;padding: 0px;">
<div id="app" v-cloak>
    <el-container style="height: 100vh; border: 1px solid #eee">
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
            <el-menu :default-openeds="['1', '3']">
                <el-submenu index="1">
                    <template slot="title"><i class="el-icon-message"></i>导航一</template>
                    <el-menu-item-group>
                        <template slot="title">分组一</template>
                        <el-menu-item index="1-1">选项1</el-menu-item>
                        <el-menu-item index="1-2">选项2</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="分组2">
                        <el-menu-item index="1-3">选项3</el-menu-item>
                    </el-menu-item-group>
                    <el-submenu index="1-4">
                        <template slot="title">选项4</template>
                        <el-menu-item index="1-4-1">选项4-1</el-menu-item>
                    </el-submenu>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title"><i class="el-icon-menu"></i>导航二</template>
                    <el-menu-item-group>
                        <template slot="title">分组一</template>
                        <el-menu-item index="2-1">选项1</el-menu-item>
                        <el-menu-item index="2-2">选项2</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="分组2">
                        <el-menu-item index="2-3">选项3</el-menu-item>
                    </el-menu-item-group>
                    <el-submenu index="2-4">
                        <template slot="title">选项4</template>
                        <el-menu-item index="2-4-1">选项4-1</el-menu-item>
                    </el-submenu>
                </el-submenu>
                <el-submenu index="3">
                    <template slot="title"><i class="el-icon-setting"></i>导航三</template>
                    <el-menu-item-group>
                        <template slot="title">分组一</template>
                        <el-menu-item index="3-1">选项1</el-menu-item>
                        <el-menu-item index="3-2">选项2</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="分组2">
                        <el-menu-item index="3-3">选项3</el-menu-item>
                    </el-menu-item-group>
                    <el-submenu index="3-4">
                        <template slot="title">选项4</template>
                        <el-menu-item index="3-4-1">选项4-1</el-menu-item>
                    </el-submenu>
                </el-submenu>
            </el-menu>
        </el-aside>

        <el-container>
            <el-header style="font-size: 12px;-webkit-app-region: drag;">
                <div style="width: 650px;float: left;">
                    <div style="float: left"><img src="icon.png" style="margin-top: 10px;" height="40"/></div>
                    <div style="font-size: 12px;font-weight: bold;">窗口标题栏 VUE + ElementUI <span style="color: green;">  {{osInfo}}</span>
                    </div>
                </div>
                <div style="text-align: right;">
                    <el-dropdown style="-webkit-app-region: no-drag;">
                        <i class="el-icon-setting" style="margin-right: 15px"></i>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>查看</el-dropdown-item>
                            <el-dropdown-item>新增</el-dropdown-item>
                            <el-dropdown-item>删除</el-dropdown-item>
                        </el-dropdown-menu>
                        <span style="-webkit-app-region: no-drag;">Energy</span>
                    </el-dropdown>
                    <span style="-webkit-app-region: no-drag;text-align: right;">
                        <el-button size="mini" round @click="minWindow">最小化</el-button>
                        <el-button size="mini" round @click="maxWindow">最大化</el-button>
                        <el-button size="mini" round @click="closeWindow">关闭</el-button>
                     </span>
                </div>
            </el-header>

            <el-main>
                <el-table :data="tableData">
                    <el-table-column prop="date" label="日期" width="140">
                    </el-table-column>
                    <el-table-column prop="name" label="姓名" width="120">
                    </el-table-column>
                    <el-table-column prop="address" label="地址">
                    </el-table-column>
                </el-table>
            </el-main>
        </el-container>
    </el-container>
</div>
<style>
    .el-header {
        background-color: #E4E7ED;
        color: #333;
        line-height: 60px;
    }

    .el-aside {
        color: #333;
    }

</style>
</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                tableData: [],
                osInfo: ""
            }
        },
        mounted: function () {
            this.$nextTick(function () {
                this.initTableData()
                let vm = this;
                ipc.emit('os-info', [], function (result) {
                    console.log("os-info", result)
                    vm.osInfo = "OS: " + result
                });
            })
        },
        methods: {
            initTableData: function () {
                const item = {
                    date: '2022-02-22',
                    name: 'energy',
                    address: '北京市通州区'
                };
                this.tableData = Array(20).fill(item)
            },
            minWindow: function () {
                console.log('最小化窗口');
                ipc.emit("window-state", [0])
            },
            maxWindow: function () {
                console.log('最大化窗口');
                ipc.emit("window-state", [1])
            },
            closeWindow: function () {
                console.log('关闭窗口');
                ipc.emit("window-close")
            }
        }
    })
</script>
</html>